import * as echarts from 'echarts'
import _ from 'lodash'

export const echartsStyle = {
  legend: {
    type: 'plain',
    right: '40',
    top: '30',
    textStyle: {
      fontSize: 14,
      fontFamily: '微软雅黑',
      color: '#4A4A4A',
    },
  },
  backgroundColor: '#f2f8fb',
  grid: {
    left: '40',
    right: '40',
    top: '120',
    bottom: '50',
    containLabel: true,
  },
  yAxisObj: {
    nameLocation: 'end',
    nameGap: 20,
    nameTextStyle: {
      color: '#73819D',
      fontSize: 14,
    },
    axisTick: false,
    axisLine: {
      show: false,
    },
    axisLabel: {
      color: '#787F93',
      fontSize: 14,
      // formatter: function (v, index) {
      //   if (v.toString().indexOf('.') === -1 || index === 5) {
      //     return Math.ceil(v)
      //   } else {
      //     return '';
      //   }
      // }
    },
    splitLine: {
      lineStyle: {
        color: '#dadada',
      },
    },
    boundaryGap: false,
  },
  xAxisObj: {
    show: false,
    axisTick: false,
    axisLine: {
      lineStyle: {
        color: '#dadada',
      },
    },
    axisLabel: {
      color: '#787F93',
    },
  },
  seriesLineObj: function (color0, color1) {
    return {
      smooth: true,
      symbol: 'circle',
      symbolSize: 12,
      itemStyle: {
        color: '#4476F9',
        borderColor: '#fff',
        borderWidth: 3,
      },
      lineStyle: {
        width: 6,
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: color0, // 0% 处的颜色
            },
            {
              offset: 1,
              color: color1, // 100% 处的颜色
            },
          ],
          global: false, // 缺省为 false
        },
      },
    }
  },
  seriesBarObj: function (color0, color1) {
    return {
      barCategoryGap: '40%',
      barMaxWidth: this.seriesBarObjbarMaxWidth,
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: color0 },
          { offset: 1, color: color1 },
        ]),
      },
    }
  },
  seriesBarObjbarMaxWidth: '50',
}

export const appStyle = {
  legend: {
    type: 'plain',
    orient: 'horizontal',
    bottom: '10',
  },
  grid: {
    containLabel: true,
    left: '4',
    right: '10',
    top: '30',
  },
  yAxisObj: {
    nameLocation: 'end',
    nameGap: 20,
    nameTextStyle: {
      color: '#73819D',
      fontSize: 14,
    },
    axisTick: false,
    axisLine: {
      lineStyle: {
        color: '#dadada',
      },
    },
    axisLabel: {
      color: '#787F93',
      fontSize: 14,
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: ['#E7E2E2'],
      },
    },
    boundaryGap: false,
  },
  xAxisObj: {
    show: false,
    axisTick: false,
    axisLine: {
      lineStyle: {
        color: '#dadada',
      },
    },
    axisLabel: {
      color: '#787F93',
    },
  },

  seriesLineObj: function (smoothBol, color, areaStyleColor) {
    var areaStyle = function (areaStyleColor) {
      return {
        areaStyle: {
          opacity: 0.1,
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: areaStyleColor, // 0% 处的颜色
              },
              {
                offset: 0.8,
                color: '#fff', // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
      }
    }

    var common = function (smoothBol, color) {
      return {
        smooth: smoothBol,
        symbolSize: 6,
        itemStyle: {
          borderColor: color,
          borderWidth: 1,
        },
        lineStyle: {
          width: 3,
          color: color,
        },
      }
    }

    if (areaStyleColor) {
      return _.assign(common(smoothBol, color), areaStyle(areaStyleColor))
    } else {
      return common(smoothBol, color)
    }
  },
  seriesBarObj: function (color) {
    return {
      barCategoryGap: '40%',
      barMaxWidth: this.seriesBarObjbarMaxWidth,
      itemStyle: {
        color: color,
      },
    }
  },
  seriesBarObjbarMaxWidth: '16',
}

export const constValue = {
  splitNumber: 5,
  timeMinInterval: 7,
  timeMaxInterval: 30,
  minMax: 10,
}
